<!-- 资产页面 -->
<template>
	<view class="page container aui-content">
		<view class="">
			<!-- 自带的login（原文件没有东西）-start -->
			<view class="user-login"></view>
			<!-- 自带的login（原文件没有东西）-end -->

			<!-- 总资产块-start -->
			<view class="money-vip">
				<view class="money-vip-content">
					<view class="money-data">
						<text class="money-data-text">总资产(元)</text>
						<text class="money-data-number">{{format(userinfo.totalAssets)}}</text>
					</view>
					<view class="moner-balance">
						<view class="balance-text">
							<view class="balance-text-content">
								<text>账户余额</text>
								<view class="balance-number">
									<text>{{format(userinfo.accountBalance)}}</text>
								</view>
							</view>
							<view class="balance-text-today">
								<text class="today-text"></text>
								<text class="today-number"></text>
							</view>
						</view>
						<view class="balance-text">
							<view class="balance-text-content">
								<text>持仓市值</text>
								<view class="balance-number">
									<text>{{format(userinfo.holdMarketValue)}}</text>
								</view>
							</view>
							<view class="balance-text-today">
								<text class="today-text"></text>
								<text class="today-number"></text>
							</view>
						</view>
						<view class="balance-text">
							<view class="balance-text-content">
								<text>余额收益</text>
								<view class="balance-number">
									<text>{{format(userinfo.balanceIncome)}}</text>
								</view>
							</view>
							<view class="balance-text-today">
								<text class="today-text"></text>
								<text class="today-number"></text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 总资产块-end -->

			<!-- 剩余资金表-start -->
			<view class="money-remainder">
				<!-- 资金分类表 -->
				<view class="remainder-list">
					<view class="list-col-xs-6">
						<view class="list-col-content">
							<text class="list-col-text">可用资金</text>
							<text class="list-col-number">{{format(userinfo.availableFunds)}}</text>
						</view>
					</view>
					<view class="list-col-xs-6">
						<view class="list-col-content">
							<text class="list-col-text">持仓保证金</text>
							<text class="list-col-number">{{format(userinfo.holdMargin)}}</text>
						</view>
					</view>
					<view class="list-col-xs-6">
						<view class="list-col-content">
							<text class="list-col-text">累计盈亏</text>
							<text class="list-col-number">{{format(userinfo.accumulatePL)}}</text>
						</view>
					</view>
					<view class="list-col-xs-6">
						<view class="list-col-content">
							<text class="list-col-text">浮动盈亏</text>
							<text class="list-col-number">{{format(userinfo.floatPL)}}</text>
						</view>
					</view>
				</view>

				<!-- 资金风险状况 -->
				<view class="remainder-state">
					<view class="state-content">
						<view class="state-content-text">
							<view class="aui-text-white text-white-12">资产风险状态</view>
							<view class="aui-text-white text-white-13">安全</view>
							<view class="aui-text-white text-white-14">账户无平仓危险</view>
							<!-- 动画效果 -->
							<view class="risk-wave">
								<view class="water_waves">
									<view class="risk-wave-txt">
										{{ userinfo.assetRisk + '%' }}
									</view>
									<view class="water_wave1" style="top:100%;"></view>
									<view class="water_wave2" style="top:100%;"></view>
									<view class="water_wave3" style="top:100%;"></view>
								</view>
							</view>
						</view>
					</view>

				</view>
				<!-- 持仓收益 -->
				<!-- <view class="remainder-position">
					<view class="position-content">
						<view class="position-content-text">
							<view class="position-texts">
								持仓收益
							</view>
							<view class="position-number">
								{{format(earnings)}}
							</view>
						</view>
					</view>
				</view> -->
			</view>
			<!-- 剩余资金表-end-->

			<!-- 最后的背景条-start -->
			<view class="asset-height"></view>
			<!-- 最后的背景条-end -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userinfo:{
					totalAssets:'0.00',
					accountBalance:'0.00',
					holdMarketValue:'0.00',
					balanceIncome:'0.00',
					availableFunds:'0.00',
					holdMargin:'0.00',
					accumulatePL:'0.00',
					floatPL:'0.00',
					assetRisk:'0.00'
				}
			}
		},
		methods: {


			// 定义一个方法（类似于vue2的过滤器），然后将后端返回的数据进行千分位格式化
			format(num) {
				// 分割成一个数组(现在数据是字符串，就不需要转字符串，如果是数字就需要转字符串格式)
				// let parts = num.split(".");
				// // let parts = toString(num).split(".");
				// // 这里加上一个倒序，不然遍历出来的数据是从大到小
				// let arr = parts[0].split('').reverse()
				// let res = "";

				// arr.forEach((item, index) => {
				// 	if (index % 3 === 0 && index !== 0) {
				// 		res = "," + res;
				// 	}
				// 	res = item + res;
				// });

				// if (parts.length === 2) {
				// 	let decimal = parts[1].substr(0, 2);
				// 	res += `.${decimal}`;
				// } else {
				// 	res += ".00";
				// }
				return num;
			}
		},

		onShow() {
			// let token =uni.getStorageSync('token');
			let token = 11
			if (!token) {
				uni.navigateTo({
					url: "/pages/login/login"
				})
			}
		}
	}
</script>

<style lang="scss">
	// 最外层容器-start
	.aui-content {
		background: #fff url('../../static/asset-icon/money_bg1.png') no-repeat top center;
		background-size: 100% 8.5rem;
		padding-bottom: 3rem;
		background-color: #fff !important;
		line-height: 1.5;

		// login
		.user-login {
			height: 2rem;
			width: 32%;
			padding: 0.6rem;
		}
	}

	// 最外层容器-end

	// 总资产块-start
	.money-vip {
		padding: 0.6rem 0.6rem 0 0.6rem;
		margin-bottom: 0.75rem !important;

		.money-vip-content {
			background: #fff !important;
			border-radius: 0.4rem;
			padding: 0.7rem 0 0.3rem 0;
			box-shadow: 0px 0px 5px 2px #ddd;

			.money-data {
				display: flex;
				flex-direction: column;
				padding: 0 0.5rem 0.5rem 0.5rem !important;

				.money-data-text {
					font-size: 0.7rem;
					color: #212121 !important;
				}

				.money-data-number {
					font-size: 1.5rem;
					color: #343434 !important;
					font-weight: bold;
					line-height: 1.5;
				}
			}
		}

		.moner-balance {
			padding-left: 0.5rem !important;
			padding-right: 0.5rem !important;

			// 提取-start
			.balance-text {
				border-bottom: 1px solid #eee;
				display: flex;
			}

			.balance-text-content {
				display: flex;
				justify-content: space-between;
				padding-top: 1.5rem !important;
				padding-bottom: 1.5rem !important;
				width: 66%;

				.balance-number {
					border-right: 1px solid #eee;
					padding-right: 0.75rem !important;
				}

			}

			.balance-text-today {
				display: flex;
				flex-direction: column;
				padding: 1.2rem 0 1.2rem 0.5rem;

				.today-text {
					font-size: 0.6rem !important;
					color: #b3b3b3 !important;
					line-height: 1.5;
				}

				.today-number {
					color: #ed1e28;
					font-size: 0.7rem !important;
					line-height: 1.5;
				}
			}

			// 提取-end
		}
	}

	// 总资产块-end


	// 剩余资金表-start
	.money-remainder {
		background: #f2f2f2 !important;
		padding-top: 0.5rem !important;
		padding-bottom: 0.5rem !important;

		// 资金列表
		.remainder-list {
			display: flex;
			flex-wrap: wrap;

			.list-col-xs-6 {
				width: 50%;

				.list-col-content {
					margin: 0 0.5rem 0.5rem 0.5rem;
					padding: 1rem 0.5rem;
					border-radius: 0.3rem;
					background: #fff;
					display: flex;
					flex-direction: column;

					.list-col-text {
						font-size: 0.9rem !important;
						line-height: 1.5;
					}

					.list-col-number {
						line-height: 1.5;
					}
				}
			}
		}

		// 资金状态
		.remainder-state {
			background: #f2f2f2;
			padding: 0.75rem 0.6rem;
			margin-bottom: 0.75rem !important;
			margin-top: 0.75rem !important;
			position: relative;

			.state-content {
				background: #14896c;
				border-radius: 0.4rem;
				padding-bottom: 0.75rem !important;

				.state-content-text {
					padding: 0.75rem !important;

					.aui-text-white {
						color: #ffffff !important;
						;
					}

					.text-white-12 {
						font-size: 0.7rem !important;
					}

					.text-white-13 {
						font-size: 1.5rem !important;
						margin-bottom: 0.75rem !important;
						margin-top: 0.75rem !important;
					}

					.text-white-14 {
						font-size: 0.6rem !important;
					}
				}

				// 动画效果
				.risk-wave {
					position: absolute;
					right: 1.5rem;
					top: 1.4rem;

					.water_waves {
						width: 100px;
						height: 100px;
						border: 1px solid #ccc;
						border-radius: 50%;
						margin: auto;
						position: relative;
						background-color: #c8d5d1;
						overflow: hidden;
						animation: water-waves linear infinite;

						@keyframes water-waves {
							0% {
								transform: rotate(0deg);
							}

							100% {
								transform: rotate(360deg);
							}
						}

						.risk-wave-txt {
							color: #14141e;
							font-size: 1rem;
							position: absolute;
							top: 10px;
							z-index: 9;
							width: 100%;
							text-align: center;
						}

						.water_wave1 {
							animation: inherit;
							animation-duration: 10s;
							background-color: #33cfff;
							position: absolute;
							width: 200%;
							height: 200%;
							top: 40%;
							left: -25%;
							opacity: 0.7;
							border-radius: 40%;
						}

						.water_wave2 {
							animation: inherit;
							animation-duration: 12s;
							position: absolute;
							width: 200%;
							height: 200%;
							background-color: #0eaffe;
							top: 45%;
							left: -35%;
							border-radius: 35%;
							opacity: 0.5;
						}

						.water_wave3 {
							animation: inherit;
							animation-duration: 16s;
							position: absolute;
							width: 200%;
							height: 200%;
							top: 50%;
							left: -35%;
							opacity: 0.3;
							background-color: #0f7ae4;
							border-radius: 33%;
						}
					}
				}
			}


		}

		// 持仓收益
		.remainder-position {
			background: none;
			padding: 0.6rem 0.6rem 0 0.6rem;
			margin-bottom: 0.75rem !important;


			.position-content {
				background-color: #ffffff;
				border-radius: 0.4rem;
				padding: 0.7rem 0 0.3rem 0;

				.position-content-text {
					padding: 0 0.5rem 0.5rem 0.5rem !important;

					.position-texts {
						font-size: 0.8rem !important;
					}

					.position-number {
						color: #ed1e28 !important;
						font-size: 1.2rem;

					}
				}
			}
		}

	}

	// 剩余资金表-end

	// 最后的背景条
	.asset-height {
		background-color: #fff;
		padding-top: 1rem;
		padding-bottom: 3rem !important;
	}
</style>